<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="店铺" prop="storeName">
        <el-input
          v-model="queryParams.storeName"
          placeholder="请输入店铺名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="产品编号" prop="numIid">
        <el-input
          v-model="queryParams.numIid"
          placeholder="请输入产品"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="买家昵称" prop="buyerNick">
        <el-input
          v-model="queryParams.buyerNick"
          placeholder="请输入产品"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="日期" prop="creat">
        <el-date-picker
          v-model="datePick"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <!-- <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择状态"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item> -->
        <el-button
          type="cyan"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出</el-button>
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="detailList">
      <el-table-column label="订单号" align="center" prop="tid">
        <template slot-scope="scope">
          <span>
            <svg
              t="1616910490946"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4149"
              width="16"
              height="16"
            >
              <path
                d="M839.66834915 257.07952355s-218.3135232-36.46714311-364.03063466-36.4671431-218.4183808-72.81777778-218.4183808-72.81777778v-72.81777778h-72.78282524V948.90666667h72.80612693V512s72.80612693 72.81777778 218.4183808 72.81777778 364.03063467 36.35063467 364.03063467 36.35063467l-109.20336498-181.98619023z"
                p-id="4150"
                :fill="getSellerFlagColor(scope.row.sellerFlag)"
                data-spm-anchor-id="a313x.7781069.0.i14"
                class="selected"
              ></path>
            </svg>
          </span>
          <span>{{ scope.row.tid }}</span>
        </template>
      </el-table-column>
      <el-table-column label="店铺" align="center" prop="storeName" />
      <el-table-column label="商品图片" align="center" prop="picPath">
        <template slot-scope="scope">
          <img :src="scope.row.picPath" height="50" />
        </template>
      </el-table-column>
      <el-table-column label="商品数字编号" align="center" prop="numIid" />
      <el-table-column label="商品名" align="center" prop="orders[0].title" />
      <el-table-column label="买家昵称" align="center" prop="buyerNick" />
      <el-table-column
        label="已评价"
        align="center"
        prop="buyerRate"
        :formatter="buyerRateFormat"
      />
      <el-table-column
        label="交易类型"
        align="center"
        prop="type"
        :formatter="orderTypeFormat"
      />
      <el-table-column
        label="交易状态"
        align="center"
        prop="status"
        :formatter="orderStatusFormat"
      />
      <el-table-column label="实付金额" align="center" prop="payment" />
      <el-table-column label="邮费" align="center" prop="postFee" />
      <el-table-column label="商品单价" align="center" prop="price" />
      <el-table-column label="商品总价" align="center" prop="totalFee" />

      <el-table-column
        label="交易创建时间"
        align="center"
        prop="created"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.created, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="付款时间"
        align="center"
        prop="created"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.payTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="修改时间"
        align="center"
        prop="modified"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.modified, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="完成时间"
        align="endTime"
        prop="modified"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { listorder ,exportReport} from "@/api/business/order";
export default {
  name: "Detail",
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      totalDone: 0,

      detailList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        numIid: null,
        storeName: null,
        end: null,
        start: null,
      },
      orderTypeOptions: [],
      orderStatusOptions: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      datePick: [],
    };
  },
  created() {
    // console.log(this.$route.params.id)
    // if(this.$route.params.row){
    //    this.taskData = this.$route.params.row
    // }
    this.getList();

    this.getDicts("taobao_order_type").then((response) => {
      this.orderTypeOptions = response.data;
    });
    this.getDicts("taobao_order_status").then((response) => {
      this.orderStatusOptions = response.data;
    });
  },
  watch: {
    datePick: {
      handler: function (val, oldval) {
        if (val != null) {
          this.queryParams.start = this.parseTime(val[0], "{y}-{m}-{d}");
          this.queryParams.end = this.parseTime(val[1], "{y}-{m}-{d}");
        }
      },
    },
  },
  datePick(newData) {},
  methods: {
    /** 查询任务完成明细列表 */
    getList() {
      console.log(this.queryParams);
      this.loading = true;
      listorder(this.queryParams).then((response) => {
        this.detailList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getSellerFlagColor(flg) {
      let flgColor = ["#d81e06", "#f4ea2a", "#1afa29", "#1296db", "#d4237a"];
      const col = flgColor[flg - 1];
      return col;
    },
    buyerRateFormat(row, column) {
      return row.buyerRate == 0 ? "否" : "是";
    },
    // 订单类型字典翻译
    orderTypeFormat(row, column) {
      let type = this.selectDictLabel(this.orderTypeOptions, row.type);
      if (type == "") {
        type = this.selectDictLabel(this.orderStatusOptions, row.type);
      }
      return type;
    },
    orderStatusFormat(row, column) {
      return this.selectDictLabel(this.orderStatusOptions, row.status);
    },
        /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有淘宝订单?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportReport(queryParams);
        }).then(response => {
          this.download(response.msg);
        })
    },
  },
};
</script>